<!--必要的组件说明-->
<!-- 编制汇总表 -->
<!-- author:${author}. date: ${date}-->
<template>
  <div class="${tablename?lower_case}">
    <div class="topDiv">
      <el-form label-position="left" label-width="110px" :model="searchForm">
        <!--        <el-form-item label="是否细到职位" size="small">
                  <el-select v-model="searchForm.jobBoole"
                             placeholder="请选择"
                             size="small">
                    <el-option
                      v-for="item in boole_options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>-->
        <!--select留着，用来适应更多的查询类型的匹配。以后会用得上-->
        <#list querycolumn as i>
            <el-form-item label="${i}" size="small">
	          <el-input v-model="searchForm.searchcolume${i?counter}"></el-input>
	        </el-form-item>
    	</#list>
        <el-button type="primary" size="small" @click="doSearch">查询</el-button>
      </el-form>
    </div>

    <div class="top_import">
    </div>

    <!--:height="'calc(100% - 227px)'"-->
    <el-table
      id="exportTab"
      v-loading="loading"
      :height="'calc(100% - 137px)'"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :data="tableData"
      border
      style="width: 100%;">
      <el-table-column
        label="${tablename?lower_case}"
        class-name="table_title"
        align="center">
        <el-table-column
          label="序号"
          type="index"
          width="55">
        </el-table-column>
        <el-table-column
          :prop="key"
          :label="Object.keys(value)[0]"
          :key="key"
          show-overflow-tooltip
          :width="Object.values(value)[0]"
          v-for="(value, key) in filterList1">
        </el-table-column>
      </el-table-column>
    </el-table>

    <div class="tablePage">
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="sizeChange"
        :current-page.sync="currentPage"
        :page-size="size"
        :page-sizes="[12, 32, 52, 100, 300]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  import Vue from "vue";

  export default {
    name: "prepTable",
    components: {},
    data() {
      return {
        currentPage: 1, //页数
        size: 12, //加载条数
        total: 0, //总条数
        searchForm: {
          searchDate: "2020-09-22",
          jobBoole: "1",
          sumBoole: "0"
        },
        boole_options: [
          {
            value: "1",
            label: "是"
          },
          {
            value: "0",
            label: "否"
          }
        ],
        loading: false,
        tableData: [
          {
            column1: "column1",
            column2: "column2",
            column3: "column3",
            column4: "column41",
            column5: "column51",
            column6: "column16",
            column7: "column17",
            column8: "column18",
            column9: "column91",
            column10: "column10",
            column11: "column11"
          }
        ],
        filterList1: {
         <#list listcolumn as i>
            column${i?counter}: {${i}:""}
            <#if i_has_next>,</#if>
    	 </#list>
        } //显示的过滤的字段 注：格式与字段不能乱改，跟后台取值有关联
      };
    },
    methods: {
      /*查询*/
      doSearch() {
        this.currentPage = 1;
        this.loadPostAjax();
      },
      /*加载列表数据*/
      loadPostAjax() {
        this.loading = true;
        let param = {
          search_objStr: JSON.stringify(this.searchForm),
          currentPage: this.currentPage,
          pageSize: this.size,
          jobBoole: this.searchForm.jobBoole
        }; //这个是定义参数，注意get写法还是和post有所差别
        let url = "/hrorg-v1.hr/orgreport/prep_subdept";
        this.$http.post(url, param, {emulateJSON: true}).then(
          response => {
            this.tableData = [];
            this.total = response.body.length > 0 ? response.body[0].sum : 0;
            response.body.map(item => {
              let deptArr = item.deptPath.split("\\");
              for (let i = 0; i < deptArr.length; i++) {
                let deptName = deptArr[i].substring(0, deptArr[i].indexOf("^"));
                let rank = deptArr[i].substring(
                  deptArr[i].indexOf("^") + 1,
                  deptArr[i].length
                );
                item["dept_" + rank] = deptName;
              }
              this.tableData.push(item);
            });
            this.loading = false;
          },
          response => {
            this.loading = false;
            switch (response.status) {
              case 404:
                this.$message.error("网络发生问题，请重试");
                break;
              case 500:
                this.$message.error("系统发生问题，请联系管理员");
                break;
              default:
                this.$message.error("发生未知问题，请重试");
                break;
            }
          }
        );
      },
      /*点击页码获取数据*/
      handleCurrentChange(val) {
        this.currentPage = val;
        this.loadPostAjax();
      },
      /*页数调整*/
      sizeChange(val) {
        this.size = val;
        this.loadPostAjax();
      },
      /*页面loading效果*/
      openFullScreen2() {
        this.animationShow = this.$loading({
          lock: true,
          text: "加载中",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
      }
    },
    filters: {},
    computed: {},
    props: [],
    watch: {
      // 'searchForm.jobBoole': {
      //   handler(){
      //     this.searchForm.jobBoole ? this.exportSize = 1000 : this.exportSize = 20;
      //   },
      //   immediate: true,
      // }
    },
    created() {
      //this.loadPostAjax();
    },
    mounted() {
    }
  };
</script>

<style scoped lang="scss">
  @mixin size($w, $h) {
    width: $w;
    height: $h;
  }

  @mixin backgroundImage($url) {
    background: {
      image: url($url);
      position: center;
      size: 100% 100%;
      repeat: no-repeat;
    }
  }

  .${tablename?lower_case} {
    height: 100%;
    width: 100%;
    min-width: 1000px;
    background-color: white;
    padding: 16px 16px 0 16px;

    .topDiv {
      font-size: 0px;
      width: 100%;

      /deep/ .el-form-item {
        display: inline-block;
        margin-bottom: 10px;
        padding-right: 20px;
        width: 25%;
        input[readonly="readonly"] {
          background-color: #ffffff;
          color: #666666;
        }
        /*width: 260px;*/
      }

      .el-form-item:nth-child(3) {
        min-width: 265px;
      }

      /*.el-form-item:nth-child(5) {*/
      /*  width: 200px;*/
      /*}*/
      /*.el-form-item:nth-child(6) {*/
      /*  width: 190px;*/
      /*}*/
      /*.el-form-item:nth-child(7) {*/
      /*  width: 190px;*/
      /*}*/

      /deep/ .el-date-editor {
        width: 100%;
      }

      /deep/ .el-select {
        width: 100%;
      }
    }

    .expSty {
      color: #fff;
      background-color: #4f89fd;
      border: 1.2px solid #4f89fd;
      box-shadow: none;
      outline: none;
      cursor: pointer;
      border-radius: 2px;
      padding: 7px 15px;
      font-size: 12px;
      vertical-align: top;
      margin: 1px 0 0 24px;
    }

    button:active {
      position: relative;
      top: 2px;
    }

    .top_import {
      width: 100%;
      padding: 20px 0;
      display: none;
    }

    /deep/ .el-table {
      overflow: visible !important;
    }

    /deep/ .table_title {
      /*font-size: 16px;*/
      /*font-weight: bold;*/
    }

    /deep/ .cell_warning {
      color: red;
    }

    .tablePage {
      @include size(100%, 50px);
      /*border-top: 1px solid #d6d7d7;*/
      overflow: hidden;
      padding-top: 10px;
      padding-right: 20px;

      .el-pagination {
        float: right;
      }
    }
  }
</style>
